<template>
  <div class="home-wrapper">
    <main>
      <Index></Index>
    </main>
    <div>
      <van-tabbar v-model="active" active-color="#b39b85" inactive-color="#ccc">
        <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item>
          <span>消息</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg
              t="1628645359161"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1274"
              width="22"
              height="22"
            >
              <path
                d="M516.0448 25.6384c66.6624 0.8576 129.7408 14.08 188.9536 39.6928 58.9568 25.4976 110.4256 60.2624 154.1888 104.2304 43.8016 43.9808 78.1568 95.4624 102.9632 154.1888 24.9984 59.136 37.0688 122.1504 36.2112 188.6976-0.8576 63.9232-13.1456 123.52-36.9152 178.56-23.3472 54.0544-53.44 101.6064-90.2784 142.5024-5.056 5.4016-8.1536 10.24-9.856 14.9504 18.0864 9.344 44.352 17.5104 77.8496 23.6288 29.76 7.3088 43.2384 40.7808 21.7984 64.256-5.0688 5.5424-10.2272 8.7808-17.7664 12.544-9.8176 4.864-23.7824 9.6512-42.9056 14.9632-18.2784 5.0688-40.9344 10.0224-68.0704 14.9376-27.3536 4.9408-59.328 9.024-96.0128 12.2624-64.6016 6.4256-118.016 8.6656-160.128 6.6048-40.96-2.0224-76.9792-5.056-108.1216-9.1392-61.4784-6.6944-119.8976-23.936-174.2464-51.5968-54.1568-27.5712-101.2608-62.9248-141.12-105.984-39.9104-43.0976-71.232-92.608-93.9136-148.352-22.8864-56.2816-33.8816-116.1728-33.024-179.392C26.496 436.736 40.064 373.9904 66.304 315.3408c26.0608-58.2144 61.2352-108.9792 105.408-152.0768 44.1984-43.0976 95.872-77.0048 154.816-101.6576 59.4176-24.832 122.688-36.8128 189.504-35.968zM515.072 100.48c-56.6912-0.7296-109.824 9.344-159.68 30.1824-50.3296 21.0432-94.0544 49.7408-131.4304 86.1824-37.3632 36.4416-67.1104 79.3984-89.344 129.0752-22.0544 49.2416-33.4336 101.888-34.1632 158.2592-0.7168 53.376 8.448 103.3344 27.52 150.2336 19.3024 47.4368 45.7728 89.2672 79.5136 125.696 33.792 36.5184 73.7792 66.5344 120.1536 90.1376 46.208 23.5264 95.872 38.1824 149.2096 43.9936 29.7856 3.8912 63.8336 6.7584 102.8992 8.6912 37.888 1.856 87.808-0.2304 149.44-6.3616 32.2048-2.8544 60.0064-6.2976 83.6608-10.3424-21.248-16.1024-31.0912-39.3984-26.56-65.6896 3.6736-21.312 13.8624-40.704 29.7856-57.664 30.7584-34.1504 56.4736-74.8032 76.6592-121.5232 19.776-45.7984 30.0672-95.6544 30.784-149.8752 0.7296-56.3072-9.3824-109.056-30.3104-158.592-21.1072-49.9584-50.0864-93.376-87.0656-130.5216-36.992-37.1584-80.5376-66.5728-130.8544-88.3328-50.048-21.632-103.36-32.8192-160.2176-33.5488z"
                :fill="props.active | color"
                p-id="1275"
              ></path>
              <path
                d="M319.9872 460.8c17.9968 0 33.152 6.336 45.4912 18.9952 12.3264 12.672 18.496 27.6736 18.496 45.0048s-6.1568 32.3328-18.496 44.992c-12.3264 12.672-27.4944 19.008-45.4912 19.008-17.9968 0-33.152-6.336-45.4912-19.008C262.1696 557.1328 256 542.144 256 524.8c0-17.3312 6.1696-32.3328 18.496-45.0048 12.3264-12.6592 27.4944-18.9952 45.4912-18.9952z m204.288 0c17.7536 0 32.9344 6.3104 45.568 18.944 12.6208 12.6336 18.944 27.8144 18.944 45.568s-6.3232 32.768-18.944 45.056c-12.6336 12.288-27.8144 18.432-45.568 18.432-17.7408 0-32.7552-6.144-45.056-18.432C466.944 558.08 460.8 543.0656 460.8 525.312s6.144-32.9344 18.432-45.568c12.288-12.6336 27.3024-18.944 45.056-18.944z m204.8 0c17.7536 0 32.9344 6.3104 45.568 18.944 12.6208 12.6336 18.944 27.8144 18.944 45.568s-6.3232 32.768-18.944 45.056c-12.6336 12.288-27.8144 18.432-45.568 18.432-17.7408 0-32.7552-6.144-45.056-18.432C671.744 558.08 665.6 543.0656 665.6 525.312s6.144-32.9344 18.432-45.568c12.288-12.6336 27.3024-18.944 45.056-18.944z"
                :fill="props.active | color"
                p-id="1276"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);

import Index from "./index/index.vue";
export default {
  components: {
    Index,
  },
  data() {
    return {
      active: 0,
    };
  },

  filters: {
    color(value) {
      return value ? "#b39b85" : "#ccc";
    },
  },
};
</script>

<style lang='stylus' scoped>
.home-wrapper {
  height: 100%;
  width: auto;
}
</style>

